<template>
  <div class="blog_item">
    <div class="header">
      <router-link :to="`/blog/${blog.id}`" class="title">
        <div v-html="blog.title"></div>
      </router-link>
      <router-link class="author" :to="`/u/${blog.authorDomain}`" v-if="blog.authorId">
        <a-avatar class="author_avatar" :size="16" :src="blog.authorAvatar"/>
        <span class="author_name">{{ blog.authorName }}</span>
      </router-link>
    </div>
    <a-space class="info">
      <a-space>
        <CalendarOutlined/>
        <span>创建时间:</span>
        <span>{{ blog.createdTime }}</span>
        <span>|</span>
      </a-space>
      <a-space v-if="blog.updatedTime" class="info_update_time">
        <CarryOutOutlined/>
        <span>更新时间:</span>
        <span>{{ blog.updatedTime }}</span>
        <span>|</span>
      </a-space>
      <a-space v-if="blog.classificationName">
        <FolderOutlined/>
        <span>分类:</span>
        <div class="classification_name">{{ blog.classificationName }}</div>
        <span>|</span>
      </a-space>
      <a-space>
        <LikeOutlined/>
        <span>{{ blog.likes }}</span>
        <span>|</span>
      </a-space>
      <a-space>
        <EyeOutlined/>
        <span>{{ blog.pageViews }}</span>
      </a-space>
    </a-space>
    <div class="summary" v-html="blog.summary"></div>
    <div class="tag_list">
      <a-tag v-for="(tag,index) in blog.tagList" :key="index">
        <template #icon>
          <TagOutlined/>
        </template>
        <span>{{ tag.name }}</span>
      </a-tag>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import {
  CalendarOutlined,
  CarryOutOutlined,
  EyeOutlined,
  FolderOutlined,
  LikeOutlined,
  TagOutlined
} from '@ant-design/icons-vue'

export default defineComponent({
  props: {
    blog: {
      type: Object,
      default () {
        return {
          id: '',
          authorId: '',
          authorName: '',
          authorDomain: '',
          authorAvatar: '',
          title: '',
          summary: '',
          content: '',
          classificationId: '',
          classificationName: '',
          tagList: [],
          likes: 0,
          pageViews: 0,
          createdTime: '',
          updatedTime: ''
        }
      }
    }
  },
  components: {
    CalendarOutlined,
    CarryOutOutlined,
    FolderOutlined,
    TagOutlined,
    LikeOutlined,
    EyeOutlined
  }
})
</script>

<style lang="less">
.blog_item {
  padding: 10px 5px;
  font-size: 14px;

  &:hover {
    background-color: #00000005;
  }

  & .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    & a {
      color: #000000;
    }

    & .title {
      max-width: 75%;
      font-size: 20px;
      font-weight: 700;
    }

    & .author {
      height: 100%;
      color: #00000080;
      display: flex;
      align-items: center;
      cursor: pointer;

      & .author_avatar {
        margin-right: 5px;
      }

      & .author_name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  & .info {
    margin-top: 10px;
    color: #00000080;

    & .classification_name {
      max-width: 50px;
      color: #00000080;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  & .summary {
    margin-top: 10px;
  }

  & .tag_list {
    margin-top: 10px;
    display: flex;
  }
}

@media screen and (max-width: 1400px) {
  .home_child_container {
    & .info {
      flex-wrap: wrap;

      & .ant-space-item {
        white-space: nowrap;
      }

      & .info_update_time {
        display: none;
      }
    }
  }
}
</style>
